<template>
    <div class="online-search">
        <el-form :inline="true" :model="formInline" class="form-inline">
            <el-form-item label="登录地址">
            <el-input v-model="formInline.address" placeholder="请输入登陆地址" clearable />
            </el-form-item>
            <el-form-item label="登录地址">
            <el-input v-model="formInline.username" placeholder="请输入登陆地址" clearable />
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="Search">搜索</el-button>
            <el-button icon="Delete" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div class="online-table">
        <el-table :data="tableData" style="width: 900px; overflow-x: auto !important; margin: 0 auto;">
            <el-table-column prop="order" label="序号" width="120" />
            <el-table-column prop="num" label="编号" width="120" />
            <el-table-column prop="logName" label="登陆名称" width="120" />
            <el-table-column prop="deptName" label="部门名称" width="120" />
            <el-table-column prop="host" label="主机" width="120" />
            <el-table-column prop="logAdd" label="登陆地点" width="120" />
            <el-table-column prop="browser" label="浏览器" width="120" />
            <el-table-column prop="os" label="操作系统" width="120" />
            <el-table-column prop="logTime" label="登陆时间" width="120" />
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button link type="primary" icon="Delete" @click="del(scope.$index)">
                    强退
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import {ElMessage , ElMessageBox } from 'element-plus'
const formInline = reactive({
  address: '',
  username: '',
})
function reset() {
  formInline.address='';
  formInline.username='';
}


const onSubmit = () => {
  console.log('submit!')
}

const tableData = ref([
  {
    order: '1',
    num: 'Tom',
    logName: 'czh',
    deptName: '研发',
    host: '192.1.1',
    logAdd: '郑州',
    browser: 'edge',
    os: 'windows11',
    logTime: '2014-11-11',

  },
  {
    order: '1',
    num: 'Tom',
    logName: 'czh',
    deptName: '研发',
    host: '192.1.1',
    logAdd: '郑州',
    browser: 'edge',
    os: 'windows11',
    logTime: '2014-11-11',
  },
  {
    order: '1',
    num: 'Tom',
    logName: 'czh',
    deptName: '研发',
    host: '192.1.1',
    logAdd: '郑州',
    browser: 'edge',
    os: 'windows11',
    logTime: '2014-11-11',
  },
  {
    order: '1',
    num: 'Tom',
    logName: 'czh',
    deptName: '研发',
    host: '192.1.1',
    logAdd: '郑州',
    browser: 'edge',
    os: 'windows11',
    logTime: '2014-11-11',
  },
])
function del(n) { 
  ElMessageBox.confirm(
    '你确定要强退吗？',
    '确定',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      tableData.value.splice(n,1);
      ElMessage({
        type: 'success',
        message: '强退成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
</script>

<style scoped>
.online-search{ margin: 30px 0 30px 250px;}
.form-inline .el-input { --el-input-width: 220px;}

</style>